<template>
  <div class="ZYF-exhaustgas">
    <h3 class="h3">故障解决方案管理</h3>
    <div class="video_box" id="operator" v-show="this.videoUrl">
      <video ref="videoPlayer" class="video-js" poster="@/assets/烟气视频.png"></video>
    </div>
    <Modal @add="addData" @childFn="getData" :who="page" :isShow="true"></Modal>

    <div class="tableclass">
      <my-table style="min-height: 94%" :data-source="tableData" :pagination="false" :rowKey="(record) => record.id">
        <a-table-column title="序号" data-index="id" align="center" width="100px" :customRender="customRender"/>
        <a-table-column title="仪器名称" key="name" :ellipsis="true" data-index="equipmentName" align="center"/>
        <a-table-column title="仪器型号" data-index="equipmentVersion" align="center" :ellipsis="true"/>
        <a-table-column title="故障名称" data-index="faultName" align="center" :ellipsis="true"/>
        <!--        <a-table-column title="故障类型" data-index="faultTypeName" align="center" :ellipsis="true"/>-->
        <a-table-column title="解决方案" data-index="faultSolution" align="center" :ellipsis="true"/>
        <a-table-column title="操作" align="center" width="200px">
          <template slot-scope="record">
            <span class="action-class" @click="seeDetail(record)">查看详情</span>
            <span class="action-class" :style="{color:record.status==1?'':'rgba(220, 220, 220,.7)',cursor:record.status==1?'':'not-allowed'}" @click="record.status==1&&toExamine(record)">审核</span>
            <span class="action-class" @click="batchDelate(record)">删除</span>
          </template>
        </a-table-column>
      </my-table>
      <div class="content-bottom clearfix">
        <div class="page-box">
          <a-pagination :show-total="(total) => `共 ${total} 条记录`" v-model="form.currentPage" :total="total" :defaultPageSize="form.pageSize" :item-render="itemRender" @change="pagechangeFn"/>
        </div>
      </div>
    </div>
    <!-- //详情弹框 -->
    <a-modal v-model="detailPop" width="65%" title="详细信息" centered @cancel="delLisst" :maskClosable="false" :footer="null">
      <div>
        <a-form class="pollutionForm" :label-col="{ span: 10 }" :wrapper-col="{ span: 14 }">
          <a-row>
            <a-col :span="12" pull="1">
              <a-form-item label="仪器名称:">
                <span style="color: #bebebe; font-size: 18px">{{detail.equipmentName}}</span>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="仪器型号">
                <span style="color: #bebebe; font-size: 18px">{{detail.equipmentVersion }}</span>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="12" pull="1">
              <a-form-item label="故障名称:">
                <span style="color: #bebebe; font-size: 18px">{{
                    detail.faultName
                  }}</span>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="故障类型">
                <span style="color: #bebebe; font-size: 18px">{{
                    detail.faultTypeName
                  }}</span>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="12" pull="1">
              <a-form-item label="设备分类:">
                <span style="color: #bebebe; font-size: 18px">{{
                    detail.typeName
                  }}</span>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="创建时间">
                <span style="color: #bebebe; font-size: 18px">{{
                    detail.createTime
                  }}</span>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="24" pull="6">
              <a-form-item label="解决方案">
                <span style="color: #bebebe; font-size: 18px">{{
                    detail.faultSolution
                  }}</span>
              </a-form-item>
            </a-col>
          </a-row>
<!--          <a-row>-->
<!--            <a-col :span="24" pull="6">-->
<!--              <a-form-item label="文件信息"></a-form-item>-->
<!--            </a-col>-->
<!--          </a-row>-->
          <a-row>
            <a-col :span="4"></a-col>
            <a-col :span="20">
              <div class="up-box">
                <div v-viewer>
                  <img v-for="(item, i) in imgsList" :key="i" :src="item" alt />
                </div>
                <div>
                  <img
                      v-for="(item, i) in videoList"
                      :key="i"
                      src="@/assets/烟气视频.png"
                      @click="videoImg(item)"
                      alt
                  />
                </div>
                <div
                    style="margin: 10px 0"
                    v-for="(item, i) in fileList"
                    :key="i"
                >
                  <a class="infoDown" :href="item.fileUrl" target="_blank">
                    <span>{{ item.fileName }}</span>
                    <span>下载<a-icon class="ddicon" type="download" /></span>
                  </a>
                </div>
              </div>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </a-modal>
    <!-- 审核-->
    <a-modal v-model="istoFxamine" width="50%" title="审核" centered :maskClosable="false" :footer="null">
      <a-row>
        <a-form-model :label-col="{ span: 8 }" :wrapper-col="{ span: 15 }">
          <a-col :span="12">
            <a-form-model-item label="仪器名称">
              <span style="color: #bebebe; font-size: 18px">{{detail.equipmentName}}</span>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="仪器型号">
              <span style="color: #bebebe; font-size: 18px">{{ detail.equipmentVersion }}</span>
            </a-form-model-item>
          </a-col>

          <a-col :span="12">
            <a-form-model-item label="仪器类型">
              <span style="color: #bebebe; font-size: 18px">{{ detail.faultTypeName }}</span>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="故障名称">
              <span style="color: #bebebe; font-size: 18px">{{detail.faultName}}</span>
            </a-form-model-item>
          </a-col>
            <a-col :span="12">
              <a-form-model-item label="设备分类">
                <span style="color: #bebebe; font-size: 18px">{{ detail.typeName }}</span>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="创建时间">
                <span style="color: #bebebe; font-size: 18px">{{ detail.createTime }}</span>
              </a-form-model-item>
            </a-col>

          <a-col :span="24">
            <a-form-model-item label="解决方案" :label-col="{ span: 4 }" :wrapper-col="{ span: 20}">
              <span style="color: #bebebe; font-size: 18px">{{ detail.faultSolution }}</span>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="审核意见" :label-col="{ span: 4 }" :wrapper-col="{ span: 20}">
              <a-input v-model="toExamineFrom.opinion" type="textarea" placeholder="请输入审核意见"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item :label-col="{ span: 0 }" :wrapper-col="{ span: 24}">
              <div style="width: 100%;display: flex;justify-content: space-around;">
                <a-button type="primary" @click="ExamineBtn(true)">通过</a-button>
                <a-button type="danger" @click="ExamineBtn(false)">驳回</a-button>
              </div>
            </a-form-model-item>
          </a-col>
        </a-form-model>
      </a-row>
    </a-modal>
  </div>
</template>

<script>
import "viewerjs/dist/viewer.css";
import Viewer from "v-viewer";
import Vue from "vue";
Vue.use(Viewer);
import moment from "moment";
import "moment/locale/zh-cn";
import Modal from "./components/modal.vue";
import videojs from "video.js";
import "video.js/dist/video-js.css";
export default {
  name: "Managefault",
  components: {
    Modal,
  },
  data() {
    return {
      customRender: (text, record, index) =>
          `${(this.form.currentPage - 1) * this.form.pageSize + index + 1}`,
      labelCol: { span: 7 },
      wrapperCol: { span: 17 },
      form: {
        currentPage: 1,
        pageSize: 10,
        type: "",
        name: "",
        spareVersion: "",
        status:undefined,
        // faultTypeId: "",
      },
      total: 0,
      tableData: [],
      current: 1,
      page: "exhaustgas",
      childList: {},
      moment,
      imgsList: [],
      videoList: [],
      videoUrl: "",
      fileList: [],
      detail: {},
      detailPop: false,
      istoFxamine:false,  // 审核弹窗
      toExamineFrom:{
        solutionId:"",
        opinion:"",
        isAgree: ""
      }
    };
  },
  methods: {
    //打开视频
    videoImg(item) {
      this.videoUrl = item.fileUrl;
      console.log(this.videoUrl);
      let options = {
        controls: true, // 是否显示底部控制栏
        preload: "auto", // 加载<video>标签后是否加载视频
        autoplay: "muted", // 静音播放
        playbackRates: [0.5, 1, 1.5, 2], // 倍速播放
        width: "640",
        height: "247",
        controlBar: {
          // 自定义按钮的位置
          children: [
            {
              name: "playToggle",
            },
            {
              name: "progressControl",
            },
            {
              name: "currentTimeDisplay",
            },
            {
              name: "timeDivider",
            },
            {
              name: "durationDisplay",
            },

            {
              name: "volumePanel", // 音量调整方式横线条变为竖线条
              inline: false,
            },
            {
              name: "pictureInPictureToggle", //画中画播放模式
            },
            {
              name: "fullscreenToggle",
            },
          ],
        },
      };
      this.player = videojs(
          this.$refs.videoPlayer,
          options,
          function onPlayerReady() {}
      );
      this.player.src({
        src: this.videoUrl,
      });
      var CloseButton = videojs.getComponent("CloseButton");
      CloseButton.prototype.handleClick = () => this.closeVideo();
      var closeButton = new CloseButton(this.player);
      this.player.addChild(closeButton);
      document.getElementById("operator").style.display = "block";
    },
    //关闭播放框
    closeVideo() {
      document.getElementById("operator").style.display = "none";
      this.player.pause();
    },
    // 审核
    toExamine(data){
      console.log(data);
      this.toExamineFrom.solutionId = data.id;
      this.detail = data;
      this.istoFxamine = true;

    },
    ExamineBtn(is) {
      this.toExamineFrom.isAgree = is;
      console.log(this.toExamineFrom)
      this.$api.faultSolutionAudit(this.toExamineFrom).then(res => {
          if(res.data.code === 0){
            this.istoFxamine = false;
            this.$message.info(res.data.errorMessage);
            this.toExamineFrom = {
              solutionId:"",
              opinion:"",
              isAgree: ""
            }
            this.detail = {};
            this.getExhaustgas()
          }else {
            this.$message.info(res.data.errorMessage)
          }
      })
    },
    //删除按钮
    batchDelate(index) {
      let _that = this;
      this.$confirm({
        title: "是否确认删除",
        onOk() {
          _that.$api.delSolution(index.id).then((res) => {
            if (res.status == 200) {
              _that.$message.info("删除成功");
              _that.getExhaustgas();
            }
          });
        },
        class: "delk",
      });
    },
    //查看详情方法
    seeDetail(index) {
      this.detailPop = true;
      this.$api.getSolutionDetail(index.id).then((res) => {
        console.log(res.data)
        this.detail = res.data.data;
        this.detail.createTime = moment(res.data.data.createTime).format(
            "YYYY/MM/DD"
        );
        if(this.detail.fileInfos){
          this.detail.fileInfos.forEach((item) => {
            let index = item.fileUrl.lastIndexOf(".");
            let ext = item.fileUrl.substr(index + 1);
            let IArr = [
              "png",
              "jpg",
              "jpeg",
              "bmp",
              "gif",
              "webp",
              "psd",
              "svg",
              "tiff",
            ];
            let MArr = ["mp4", "rmvb", "avi"];
            if (IArr.indexOf(ext.toLowerCase()) >= 0) {
              this.imgsList.push(item.fileUrl);
            }
            if (MArr.indexOf(ext.toLowerCase()) >= 0) {
              this.videoList.push(item);
            }
            if (
                MArr.indexOf(ext.toLowerCase()) == -1 &&
                IArr.indexOf(ext.toLowerCase()) == -1
            ) {
              this.fileList.push(item);
            }
          });
        }

      });
    },
    delLisst() {
      this.detailPop = false;
      this.imgsList = [];
      this.videoList = [];
      this.fileList = [];
    },
    //查询数据方法
    getExhaustgas() {
      console.log(this.form)
      if(this.form.status===undefined){
        this.form.status = ""
      }
      this.$api.faultSolutionFindSolution(this.form).then((res) => {
        res.data.data.records.map(v=>v.createTime = moment(v.createTime).format("YYYY/MM/DD"))
        this.tableData = res.data.data.records;
        this.total = res.data.data.total;
        if (res.data.data.records.length == 0 && this.form.currentPage > 1) {
          this.form.currentPage -= 1;
          this.getExhaustgas();
        }
      });
    },
    addData(index) {
      console.log(index);
      this.getExhaustgas();
    },
    getData(index) {
      this.form = {...index};
      this.getExhaustgas();
    },
    // 分页方法
    itemRender(current, type, originalElement) {
      if (type === "prev") {
        return <a>上一页</a>;
      } else if (type === "next") {
        return <a>下一页</a>;
      }
      return originalElement;
    },
    pagechangeFn(page, pageSize) {
      pageSize;
      this.form.currentPage = page;
      this.getExhaustgas();
    },
  },
  mounted() {
    this.getExhaustgas();
  },
};
</script>


<style lang='scss' scoped>
.tableclass{
  height: calc(100% - 90px);
}
.video_box {
  position: absolute;
  z-index: 9999;
  height: 450px;
  left: 11%;
  top: 13%;
}
.video-js {
  height: 450px;
  width: 1000px;
}
.infoDown {
  display: flex;
  width: 100%;
  justify-content: space-between;
  span {
    color: #bebebe;
    .ddicon {
      color: #37ddc0;
      margin: 0 5px;
    }
  }
}
.infoDown:hover {
  background: #bebebe38;
  span {
    color: #37ddc0;
    .ddicon {
      color: black;
    }
  }
}
.up-box {
  width: 80%;
  height: 100%;
  div {
    width: 100%;
    margin: 0 5px;
    display: flex;
    flex-wrap: wrap;
    img {
      margin: 5px 10px;
      width: 100px;
      height: 80px;
    }
  }
}
.delBtn {
  margin: 0 10px;
  background: #954a45;
  border: 1px solid #954a45;
}
.ZYF-exhaustgas {
  width: 100%;
  height: 100%;
  padding: 1%;
  box-sizing: border-box;
}
.a-col-class {
  margin-right: 18px;
}

.queryBtn {
  letter-spacing: 8px;
  background-color: #2c6a5f;
  border: 1px solid #2c6a5f;
}

/* 表格样式 */
.action-class {
  font-weight: 600;
  color: #1890ff;
  margin-right: 10px;
}
.action-class:hover {
  cursor: pointer;
}


/* 分页 */
.content-bottom {
  float: right;
  margin-top: 12px;
}

</style>